<template>
  <div class="complete-box">
    <div class="my-train">
      <span style="train-left">我的训练</span>
      <span class="tip">
        <img src="@/assets/images/tip.png" alt= /> 统计说明
      </span>
    </div>
    <div class="box">
      <CircleProgress :circelData="circelData" />
    </div>
    <div class="table-title">
      已完成测验次数：<span style="color:#F86F33;">{{size}}</span> 次
    </div>
    <InsTable :table-head="tableHead" :table-data="tableData">
      <!-- 自定义列 操作 -->
      <el-table-column slot="handle" slot-scope="headScope" :width="140" align="center" :label="headScope.head.label">
        <template slot-scope="scope">
          <el-button class="restart" type="primary" size="small" @click="$emit('getReport',scope.row.testBatchId)">查看报告</el-button>
        </template>
      </el-table-column>
    </InsTable>
    <el-button class="restart" type="primary" @click="$emit('startTest')">重新测验</el-button>
  </div>
</template>
<script>
import CircleProgress from '../CircleProgress'
import InsTable from '@/components/InsTable'
import { historyTest } from '@/api/student/lesson/study'
export default {
  name: 'CompleteBox',
  components: {
    CircleProgress,
    InsTable
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    resourceLessonChapterId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      circelData: [
        {
          name: '时长',
          text: '',
          percentage: 45

          // status有三种形式
          // warning 黄色 success 绿色
        },
        {
          name: '得分',
          text: '',
          percentage: 45,
          // status有三种形式
          // warning 黄色 success 绿色
          status: 'success'
        },
        {
          name: '排名',
          text: '',
          percentage: 45,
          // status有三种形式
          // warning 黄色 success 绿色
          status: 'warning'
        }
      ],
      tableHead: [
        {
          label: '分数',
          prop: 'score'
        },
        {
          label: '时间',
          prop: 'createdTime'
        },
        {
          label: '耗时',
          prop: 'testDuration'
        },
        {
          label: '操作',
          prop: 'handle',
          isSlot: true
        }
      ],
      tableData: [],
      size: 0
    }
  },
  watch: {
    info: {
      deep: true,
      handler () {
        this.drawCircel()
        this.historyTest()
      }
    }
  },
  mounted () {
    this.drawCircel()
    this.historyTest()
  },
  methods: {
    drawCircel () {
      this.circelData[0].text = this.info.testDuration
      this.circelData[1].text = this.info.score
      this.circelData[2].text = this.info.rank
    },
    async historyTest () {
      const res = await historyTest({
        resourceLessonChapterId: this.resourceLessonChapterId
      })
      this.size = res.data.historyListSize
      this.tableData = res.data.historyList
    }
  }
}
</script>

<style lang="scss" scoped>
.complete-box {
  padding: 20px 15px 15px 15px;
  text-align: center;
  .my-train {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .train-left {
      font-size: 22px;
      font-weight: 400;
    }
    .tip {
      font-size: 14px;
      display: flex;
      align-items: center;
      font-weight: 400;
      img {
        width: 19px;
        padding-right: 8px;
      }
    }
  }
  .table-title {
    text-align: left;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(16, 29, 55, 1);
    margin-bottom: 13px;
    margin-top: 40px;
  }
  .restart {
    margin: 0 auto;
    margin-top: 20px;
  }
}
</style>
